<template>
  <div class="plantSetting">
    <span
      v-if="plantList.length === 1"
      :class="isWindow7 ? 'c-#333' : 'c-white'"
      class="pl-[8px] pr-[8px]"
      >{{ userPlantInfo?.organizationCode ?? "" }}</span
    >
    <el-dropdown
      v-if="plantList.length > 1"
      class="plant-dropdown pl-[8px] pr-[8px]"
      trigger="click"
    >
      <span
        class="el-dropdown-link text-[12px]"
        :class="isWindow7 ? 'c-#333' : 'c-white'"
      >
        {{ userPlantInfo?.organizationCode ?? "" }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="item in plantList"
            :key="item.id"
            :disabled="
              userPlantInfo?.organizationCode === item.organizationCode
            "
            @click="changePlant(item)"
            >{{ item.organizationCode }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { storeToRefs } from "pinia";
import { useUserStoreHook, useUserStore } from "@/store/modules/user";
import { ArrowDown } from "@element-plus/icons-vue";
import request from "@/utils/request";

const userStore = useUserStoreHook();
const { isWindow7 } = storeToRefs(userStore); // 是否是window7系统

const userPlantInfo = computed(() =>
  useUserStore().userPlantInfo ? JSON.parse(useUserStore().userPlantInfo) : {}
);

const plantList = ref([]);

// 获取物料号下拉树
const getMyPlantList = async () => {
  const { data } = await request({
    url: `/system/loginUserPower/listOrganization?organizationType=3`,
    method: "POST",
    data: {},
  }).catch(() => {
    plantList.value = [];
  });
  if (data && data.length) {
    plantList.value = data;
    let effectCode = false;
    if (userPlantInfo.value) {
      const { organizationCode } = userPlantInfo.value;
      const current = data.filter(
        (e) => e.organizationCode === organizationCode
      );
      if (current.length) {
        effectCode = true;
      }
    }
    if (!userPlantInfo.value || !effectCode) {
      userStore.setUserPlantInfo(data[0]);
    }
  } else {
    userStore.setUserPlantInfo("");
  }
};

function changePlant(item: any) {
  ElMessageBox.confirm(`是否将工厂切换至${item.organizationCode}?`, "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.setUserPlantInfo(item);
      ElMessage({
        type: "success",
        message: "工厂切换成功",
      });
    })
    .catch(() => {});
}

onMounted(() => {
  getMyPlantList();
});
</script>

<style scoped lang="scss">
:deep(.plantDialog .el-dialog__body) {
  padding: 20px 20px 0px;
}
:deep(.el-badge__content.is-fixed) {
  top: 12px;
}
.plantSetting {
  display: flex;
  align-items: center;
  font-size: 12px;
  .plant-dropdown,
  .el-dropdown-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}
</style>
